<template>
    <div class="isvip">
        <div style="width: 100%;border-bottom: 1px solid grey;">
            <div class="demo-input-suffix">
                <li> 会员名称：</li>
                <li>
                    <el-input
                            placeholder="请输入内容"
                            v-model="input"
                            size="mini"
                            clearable>
                    </el-input>
                </li>
            </div>
            <div class="vip-input">
<!--                <li>-->
<!--                    注册时间：-->
<!--                </li>-->
<!--                <li>-->
<!--                    <el-input v-model="input1" placeholder="xxxx-x-x" size="mini"></el-input>-->
<!--                </li>-->
<!--                <li> 至</li>-->
<!--                <li>-->
<!--                    <el-input v-model="input2" placeholder="xxxx-x-x" size="mini"></el-input>-->
<!--                </li>-->
                <li>
                    <el-button type="primary" size="medium " icon="el-icon-search" @click="sousuo">搜索</el-button>
                </li>
            </div>
        </div>
        <div class="vip-buuton">
<!--            <li>-->
<!--                <el-button type="danger" size="medium " icon="el-icon-delete" @click="del">删除用户</el-button>-->
<!--            </li>-->
<!--            <li>-->
<!--                <el-button type="primary" size="medium " icon="el-icon-edit" @click="xiugaiyy">修改用户-->
<!--                </el-button>-->
<!--                &lt;!&ndash;                dialogFormVisible&ndash;&gt;-->
<!--            </li>-->
            <li>
                <el-button type="info" size="medium " icon="el-icon-plus" @click="dialogFormVisiblel= true">添加用户
                </el-button>
            </li>
<!--            <li>-->
<!--                <el-button type="warning" size="medium " icon="el-icon-close" @click="guanbi">关闭用户</el-button>-->
<!--            </li>-->
        </div>
<!--        <el-dialog title="修改用户" :visible.sync="dialogFormVisible">-->
<!--            <el-form :model="form" style="height: 400px;">-->
<!--                <el-form-item label="用户名:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-input v-model="form.name" autocomplete="off" size="small"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="真实姓名:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-input v-model="form.ursename" autocomplete="off" size="small"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="电话:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-input v-model="form.phone" autocomplete="off" size="small"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="性别:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-select v-model="form.sex" placeholder="男" style="width:200px;">-->
<!--                        <el-option label="男" value="男"></el-option>-->
<!--                        <el-option label="女" value="女"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="邮箱:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-input v-model="form.mailbox" autocomplete="off" size="small" @blur="sendEmail"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="地址:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-input v-model="form.name" autocomplete="off" size="small"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="等级:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-select v-model="form.region" placeholder="普通用户" style="width:200px;">-->
<!--                        <el-option label="普通用户" value="1"></el-option>-->
<!--                        <el-option label="会员1级" value="2"></el-option>-->
<!--                        <el-option label="会员2级" value="3"></el-option>-->
<!--                        <el-option label="会员3级" value="4"></el-option>-->
<!--                        <el-option label="会员4级" value="5"></el-option>-->
<!--                        <el-option label="会员5级" value="6"></el-option>-->
<!--                        <el-option label="会员6级" value="7"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="状态:" :label-width="formLabelWidth" class="form-button">-->
<!--                    <el-select v-model="form.isclass" placeholder="启用" style="width: 200px;">-->
<!--                        <el-option label="启用" value="1"></el-option>-->
<!--                        <el-option label="未启用" value="2"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible = false" style="width: 50px ;height: 30px;">取 消</el-button>-->
<!--                <el-button type="primary" @click="xiugaiYYYYYY" style="width: 50px ;height: 30px;">确 定-->
<!--                </el-button>-->
<!--            </div>-->

<!--        </el-dialog>-->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisiblel">
            <el-form :model="form" style="height: 400px;">
                <el-form-item label="银行卡:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.account" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="姓名:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.name" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="电话:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.tel" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="性别:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.gender" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="年龄:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.age" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="地址:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.address" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="密码:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.password" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="身份证:" :label-width="formLabelWidth" class="form-button">
                    <el-input v-model="form1.idcard" autocomplete="off" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
<!--                <el-button @click="dialogTableVisiblel = false" style="width: 50px ;height: 30px;">取 消</el-button>-->
                <el-button type="primary" @click="tianjia" style="width: 50px ;height: 30px;">确 定
                </el-button>
            </div>

        </el-dialog>

<!--        <el-dialog title="搜索信息" :visible.sync="dialogTableVisible" width="70%">-->
<!--            <el-table :data="gridData">-->
<!--                <el-table-column property="id" label="用户名" ></el-table-column>-->
<!--                <el-table-column property="name" label="姓名" ></el-table-column>-->
<!--                <el-table-column property="gender" label="性别"></el-table-column>-->
<!--                <el-table-column property="tel" label="电话"></el-table-column>-->
<!--                <el-table-column property="nickname" label="昵称"></el-table-column>-->
<!--                <el-table-column property="address" label="地址"></el-table-column>-->
<!--                <el-table-column property="registerTime" label="加入时间"></el-table-column>-->
<!--                <el-table-column property="nickname" label="昵称"></el-table-column>-->
<!--                <el-table-column property="display" label="状态"></el-table-column>-->
<!--            </el-table>-->
<!--        </el-dialog>-->

        <div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="银行卡"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码">
                </el-table-column>
                <el-table-column
                        prop="idcard"
                        label="身份证">
                </el-table-column>

            </el-table>
        </div>
        <div>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="5"
                        layout="prev, pager, next, jumper"
                        :total="count">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "isVip",
        data() {
            return {
                input: '',
                input1: '',
                input2: '',
                dialogTableVisible: false,
                dialogFormVisible: false,


                form: {
                    account: '',//银行卡
                    name: '',//姓名
                    gender:'',//性别
                    password:'',//密码
                    tel: '',//电话
                    address: '',//地址
                    idcard:'',//身份证
                    age: '',////年龄
                    // starttime: '',//时间
                    // display: '',//状态
                },
                rules: {
                    mailAddress: [{required: true, message: '请填写电子邮箱', trigger: 'change'}]
                },
                formLabelWidth: '120px',
                dialogTableVisiblel: false,
                dialogFormVisiblel: false,
                form1: {
                    account: '',//银行卡
                    name: '',//姓名
                    gender:'',//性别
                    password:'',//密码
                    tel: '',//电话
                    address: '',//地址
                    idcard:'',//身份证
                    age: '',////年龄
                },
                tableData: [],
                count:0,
                gridData:[],
                currentPage3: 1,
                kong: [],
                value1:5,
            }
        },
        methods: {
            //找回密码

            xiugaiYYYYYY(){
                let that=this
                that.$axios.put('/api/Member/updateById',
                    {
                        id:that.kong[0].id,
                        username:that.form.name ,
                        truename:that.form.ursename,
                        mobilepho:that.form.phone ,
                        sex:that.form.sex ,
                        email:that.form.mailbox,
                        address:that.form.desc ,
                        level: that.form.isclass,
                        ifstatus:that.form.state,
                    })
                    .then(res => {
                        this.dialogFormVisible=false
                        alert("修改成功");
                        that.form.name = '';
                        that.form.ursename = '';
                        that.form.phone = '';
                        that.form.sex = '';
                        that.form.mailbox = '';
                        that.form.desc = '';
                        that.form.isclass = '';
                        that.form.state = '';
                    }).catch(res => {
                })
            },//成功
            sousuo() {
                //搜索
                this.dialogTableVisible = true
                console.log(this.input)
                this.$axios({
                    method: 'post',
                    url: '/api/employee/search',
                    data: this.qs.stringify({
                        name:this.input,
                        page: 1,
                        limit: 10,
                    })
                }).then(res => {
                    console.log(res)
                    // console.log(this.tableData[i])
                    this.tableData = res.data.employeelist
                    this.count=res.data.count;
                    // for (let i=0;i<this.tableData.length;i++) {
                    //     if (res.data.memberlist[i].recycle===1){
                    //         this.tableData[i].recycle='是'
                    //     } else {
                    //         this.tableData[i].recycle='否'
                    //     }
                    //     if (res.data.memberlist[i].complete===1){
                    //         this.tableData[i].complete='是'
                    //     } else {
                    //         this.tableData[i].complete='否'
                    //     }
                    // }
                }).catch(err => {
                    console.log("catch里的错误")
                });

                //     this.$axios.post('/api/member/search',
                //     {
                //         params: {
                //             page: 1,
                //             limit: 10
                //         }
                //     }
                // ).then(res => {
                //     this.count=res.data.count
                //     this.tableData = res.data.memberlist
                //
                // }).catch(err => {
                //     console.log("错误")
                // })

            },//成功
            del() {//删除
                let that = this
                if (that.kong.length !== 0) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let shanchu1 = [];
                        for (let i = 0; i < that.kong.length; i++) {
                            shanchu1.push(that.kong[i].id)
                        }
                        this.$axios({
                            method: 'put',
                            url: '/api/Member/deleteById',
                            data: shanchu1
                        }) .then(res => {
                            if (res.status == 200) {
                                for (let i = 0; i < that.kong.length; i++) {
                                    shanchu1.push(that.kong[i].id)
                                    let a = that.tableData.indexOf(that.kong[i])
                                    that.tableData.splice(a, 1)
                                }
                            }
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                        }).catch(res => {
                            this.$message({
                                type: 'info',
                                message: '删除失败'
                            });
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },//完成
            xiugaiyy() {//修改
                let that = this
                if (that.kong.length!==1){
                    alert('只能选择一个')
                    this.dialogFormVisible=false
                } else{
                    this.dialogFormVisible=true
                    that.form.name = that.kong[0].username
                    that.form.ursename = that.kong[0].truename
                    that.form.phone = that.kong[0].mobilephone
                    that.form.sex = that.kong[0].sex
                    that.form.mailbox = that.kong[0].email
                    that.form.desc = that.kong[0].desc
                    that.form.isclass = that.kong[0].isclass
                    that.form.state = that.kong[0].state
                }
            },//成功
            tianjia(index) { //添加
                let that = this
                console.log(this.form1)
                this.$axios({
                    method: 'post',
                    url: '/api/employee/add',
                    // headers: {'Employee': employee},
                    data: ({
                            gender:this.form1.gender,
                            password:this.form1.password,
                            account:this.form1.account,
                            // office:this.form1.office,
                            // departure:this.form1.departure,
                            idcard:this.form1.idcard,
                            name:this.form1.name,
                            tel:this.form1.tel,
                            address: this.form1.address,
                            age:this.form1.age,
                            // starttime:this.form1.starttime,
                            // display:this.form1.display
                    })
                }).then(res => {
                    console.log(res)
                    that.dialogFormVisiblel = false
                    alert('添加成功')
                    this.$axios({
                        method: 'post',
                        url: '/api/employee/search',
                        data: this.qs.stringify({
                            page: 1,
                            limit: 10,
                        })
                    }).then(res => {
                        console.log(res)
                        this.count=res.data.count
                        this.tableData = res.data.employeelist
                    }).catch(res => {
                    })

                }).catch(res => {
                })
            },//完成
            guanbi() {
                this.$confirm('此操作将关闭用户信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '关闭成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.$axios.post('/api/employee/search',this.qs.stringify( {
                    page: val,
                    limit: this.value1
                })).then(res => {
                    this.tableData = res.data.employeelist
                    this.count=res.data.count
                    // for (let i=0;i<this.tableData.length;i++) {
                    //     if (res.data.memberlist[i].display===1){
                    //         this.tableData[i].status='上架'
                    //     } else {
                    //         this.tableData[i].status='下架'
                    //     }
                    // }
                })

            },
            handleSelectionChange(val) {
                this.kong = val
            },
            sendEmail: function () {
                var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (this.form.mailbox === '' && !regEmail.test(this.form.mailbox)) {
                    this.$message({
                        message: '邮箱格式不正确,邮箱不能为空',
                        type: 'error'
                    })
                    this.form.mailbox = ''
                }
            }
        },
        created() {   //数据
            this.$axios({
                method: 'post',
                url: '/api/employee/search',
                data: this.qs.stringify({
                    page: 1,
                    limit: 10,
                })
            }).then(res => {
                console.log(res)
                this.count=res.data.count
                // let data = res.data.datas
                this.tableData = res.data.employeelist
            }).catch(res => {
            })
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .isvip {
        width: 1000px;
        border: 1px solid grey;
        margin: 0 auto;
        /*overflow: hidden;*/
    }

    .demo-input-suffix {
        width: 30%;
        height: 50px;
        line-height: 50px;
        margin-left: 60px;
        float: left;

    }

    .demo-input-suffix li:nth-child(1) {
        width: 80px;
        color: grey;
        font-size: 14px;
        float: left;
    }

    .demo-input-suffix li:nth-child(2) {
        width: 150px;
        float: left;
    }

    .vip-input {
        width: 50%;
        height: 50px;
        line-height: 50px;
        margin-left: 50%;
    }

    .vip-input li {
        float: left;
        color: grey;
        font-size: 14px;
    }

    .vip-input li:nth-child(2),
    .vip-input li:nth-child(4) {
        width: 150px;
    }

    .vip-input li:nth-child(5) button {
        width: 80px;
        height: 30px;
        padding: 5px 5px;
        line-height: 20px;
        margin-top: 10px;
        margin-left: 20px;
    }

    .vip-buuton {
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .vip-buuton li {
        width: 10%;
        height: 50px;
        line-height: 50px;
        float: left;
    }

    .vip-buuton li button {
        width: 80px;
        height: 30px;
    }

    .form-button {
        width: 90%;
        margin-top: 10px;
    }

    .block {
        margin-top: 20px;
        margin-left: 200px;
    }
</style>